<template>
  <div class="robot">
    <!-- <div class="charge" style="display: flex; padding: 30px">
      <span style="font-size: 32px">机器人集中换电:</span>
      <div :class="battery[0].value == 1 ? 'open-active' : 'open-btn'" @click="changeStatus(1)">集中换电</div>
      <div :class="battery[0].value == 0 ? 'com-active' : 'com-btn'" @click="changeStatus(0)">充电完成</div>
    </div> -->
    <h1 style="margin: 20px">机器人任务列表</h1>
    <div class="table" style="margin: 20px">
      <a-table :columns="columns" :data="task" :pagination="false" stripe size="large" :bordered="{ cell: true }" />
      <!-- <template #thead>
          <div style="width: 200px"></div>
        </template> -->
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Message } from '@arco-design/web-vue'
import { storeToRefs } from 'pinia'
import useMainStore from '../../store/main/main'
const mainStore = useMainStore()
// mainmachine.getmachineAreaList()
mainStore.getTaskList()
mainStore.getBatteryList()

const { task, battery } = storeToRefs(mainStore)
const columns = [
  {
    title: '机器人ID',
    dataIndex: 'robot_id',
    fixed: 'left',
    align: 'center',
    width: 180
  },
  {
    title: '任务起点区域',
    dataIndex: 'task_start_in',
    align: 'center'
  },
  {
    title: '任务终点区域',
    dataIndex: 'task_end_in',
    align: 'center'
  },
  {
    title: '任务状态',
    dataIndex: 'task_status',
    fixed: 'right',
    align: 'center'
  }
]
const changeStatus = (value) => {
  mainStore.getBatteryEdit({ value: value }).then(() => {
    if (value == 1) {
      Message.success('机器人集中换电成功')
    } else {
      Message.success('机器人充电完成')
    }
  })
}
</script>

<style lang="less" scoped>
:deep(.arco-table-th) {
  background-color: #1c62bb;
}
:deep(.arco-table-th-title) {
  font-size: 30px;
  color: #fff;
}
:deep(.arco-table-td-content) {
  font-size: 30px;
}
.open-btn {
  width: 200px;
  height: 100px;
  background: #ccc;
  font-size: 32px;
  text-align: center;
  line-height: 100px;
  border-radius: 8px;
  color: #fff;
  margin: 0 30px;
}
.open-active {
  width: 200px;
  height: 100px;
  background: #157ae3;
  font-size: 32px;
  text-align: center;
  line-height: 100px;
  border-radius: 8px;
  color: #fff;
  margin: 0 30px;
}
.com-btn {
  width: 200px;
  height: 100px;
  background: #ccc;
  font-size: 32px;
  text-align: center;
  line-height: 100px;
  border-radius: 8px;
  color: #fff;
}
.com-active {
  width: 200px;
  height: 100px;
  background: #157ae3;
  font-size: 32px;
  text-align: center;
  line-height: 100px;
  border-radius: 8px;
  color: #fff;
}
</style>
